<template>
  <div class="blogType-box">
     <ul>
        <li :class="item.isSelect ? 'cp active': 'cp'" v-for="item in blogTypes" :key="item.id" @click="changeBlogType(item.id)">{{item.blogTypeName}}</li>
      </ul>
  </div>
</template>

<script>
export default {
  name: 'BlogType',
  data() {
    return {
    }
  },
  props: {
    blogTypes: {
      required: true,
      type: Array
    }
  },
  methods: {
    changeBlogType(id) {
      this.$emit('changeBlogType', id)
    }
  }
}
</script>

<style scoped lang="less">
.blogType-box{
  ul{
    padding-left: 2px;
    li{
      height: 60px;
      line-height: 60px;
      margin-bottom: 10px;
      text-indent: 12px;
      &.active{
        background: #e5f1fc;
        border-left: 3px solid #3593f2;
        color: #3593f2;
      }
    }
  }
}
</style>